<!DOCTYPE HTML>
<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>TinyTalk</title>
</head>
<meta charset="UTF-8"/>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="../static/js/jquery.min.js"></script>

<style>
    body {
        text-align: center;
        width: 1400px;
        margin: 0 auto;

    }

    #message {
        margin: 0 auto;
        text-align: center;
        width: 800px;
        height: 500px;
        border: 1px solid #f00;
        overflow-y: scroll
    }

    .left {
        padding-left: 10px;
        text-align: left;
        padding-right: 100px;

    }

    .right {
        padding-left: 100px;
        padding-right: 10px;
        margin: 0 auto;
        text-align: left
    }

    .rightright {
        padding-left: 100px;
        padding-right: 10px;
        margin: 0 auto;
        text-align: right;
        text-align: right
    }

    .state {
        color: chocolate;
        font-size: 20px;
    }

    .text {
        margin-top: 5px;
        margin-left: 60px;
        text-align: left;
        width: 600px;
        height: 60px;
        /*float: right;*/
        border: 1px solid #2b2b2b;
    }

    .btn_send {
        width: 100px;
        height: 35px;
        /*float: right;*/
        text-align: center;
        margin: 20px 70px;
    }

    .btn_reload {
        width: 80px;
        float: right;
        text-align: center;
        margin: 20px 70px;
    }

    .head {
        margin: 0 auto;
    }

    .box {
        border: 1px solid #d8cdad;
    }

    .talkerLable {
        margin-right: 10px;
        width: 50px;
        text-align: center;

    }

    .warn {
        position: relative;
        width: 30px;
        height: 20px;
        top: 0px;
        right: 10px;
        padding: 0px;
        text-align: center;
        float: right;
        color: white;
        visibility: hidden;
        background-image: url(../static/img/warn_bg.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    #current_talk {
        height: 30px;
        text-align: left;
        margin: 0 auto;
        padding-left: 30px;
    }
</style>
<body>
<div class="form-horizontal head" style="margin-top: 20px;text-align: center;height: 100px;">

    <div class="form-group">
        Welcome <strong style="color: coral;margin-left: 20px;font-size: 20px" th:text="${user.name}"></strong>
        <span id="state"></span>
    </div>
    <button id="reLoad" class="col-sm-2 btn btn_reload btn-primary" onclick="openWebSocket()">重新连接</button>


</div>

<!--对话页面-->
<div class="form-group">


    <div class="panel panel-primary" style="width: 220px;height:500px;padding: 0px;margin: 0px;float: left">
        <div class="panel-heading">
            <h3 class="panel-title">所有人员</h3>
        </div>
        <div class="panel-body" style="text-align: center;padding: 10px;margin: 0px">
            <div id="all_users" style="width: 200px;">

            </div>

        </div>
    </div>

    <div class="col-sm-2 box">
        <label class="control-label box">我的好友</label>
        <div id="all_friends">
            asdfasdfasdf
        </div>
    </div>
    <!--对话框-->
    <div class="col-sm-8">
        <!--聊天的人员-->
        <div id="current_talk">

        </div>

        <div id="message">
        </div>

        <div class="form-group" style="text-align: center;height: 60px">

            <textarea class="col-sm-10 text" id="text" style="OVERFLOW:hidden"></textarea>
            <button id="sendmessage" class="col-sm-2 btn btn_send btn-primary" onclick="send()">发送</button>
        </div>

    </div>


</div>


</body>
<script type="text/javascript" charset="utf-8" src="../static/js/user_page_js.js"></script>
<script type="text/javascript" charset="utf-8" src="../static/js/user_page_websocket.js"></script>
<script type="text/javascript" charset="utf-8" src="../static/js/db_message.js"></script>
<script>
    openWebSocket([[${user.id}]]);
    getAllUsers();
</script>

</html>